﻿.red { color: #e54939 !important; }
.topNav a, .topNav a:hover { text-decoration: none; }
.topNav { background: #51409d; }
.topNav .Nav { width: 1040px; margin: 0 auto; height: 50px; }
.topNav .Nav .headadbox { float: right; line-height: 50px; color: #FF5722; margin-right: 20px; font-size: 14px; position: relative }
.topNav .Nav::after { content: ""; clear: both; display: block; }
.topNav .JBlogo { float: left; height: 38px; margin: 6px 36px 6px 10px; }
.topNav .sNav { float: left; margin: 0; padding: 0; }
.topNav .sNav li { float: left; list-style-type: none }
.topNav .sNav a, .topNav .moreballs span { color: #DBD3FF; font-size: 16px; line-height: 50px; padding: 0 18px; display: inline-block; }
.topNav .sNav a:hover, .topNav .moreballs:hover { background: #443587; }
.topNav .nav-on a, .topNav .nav-on a:hover, .topNav .nav-on span, .topNav .nav-on span:hover { background: #7159DD; color: #fff; font-weight: bold; }
.topNav i { display: none; width: 0; height: 0; margin: 2px 0 2px 5px; border-top: 5px solid #DBD3FF; border-bottom: 0 none; border-left: 4px solid transparent; border-right: 4px solid transparent; }
.topNav .moreballs { cursor: pointer; }
.topNav .moreballs .pop { right: -25%; }
.topNav .pop a { background: transparent; font-weight: normal !important; }

.topNav .loginwrap { float: right; position: relative; }
.topNav .loginwrap a, .topNav .loginwrap span { color: #DBD3FF; font-size: 14px; line-height: 50px; padding: 0 10px; display: inline-block; position: relative; cursor: pointer; }
.topNav .loginwrap a:hover, .topNav .loginwrap span:hover, .loginwrap .userbox:hover .username { color: #FFE202; }
.topNav .loginwrap .line::before, .topNav .loginwrap .line::after { content: ""; background: #fff; width: 1px; height: 16px; opacity: 0.2; position: absolute; top: 18px; left: 0; }
.topNav .loginwrap .line::after { left: auto; right: 0; }
.loginwrap .userbox { float: left; display: inline-block; position: relative; }
.topNav .loginwrap .username { color: #DBD3FF; max-width: 100px; margin: 0 5px; padding: 0; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loginwrap .usericon { background: #fff; width: 26px; height: 26px; padding: 2px; border-radius: 50%; margin: 10px 0 0 0; float: left; }
.topNav .loginwrap .msgBox { position: relative; float: right; margin: 18px 0 0 0; padding: 0; width: 20px; height: 14px; border-radius: 2px; background: url(//www.nowscore.com/images/head/msg_bg.gif) no-repeat left top; }
.loginwrap .msgBox.not { background: url(//www.nowscore.com/images/head/msg_bg.gif) no-repeat -20px top; }
.loginwrap .msgBox i { background: #e9410f; color: #fff; font-size: 12px; line-height: 12px; text-align: center; font-style: normal; width: auto; height: auto; padding: 2px 5px; margin: 0; border: none; border-radius: 20px; transform: scale(0.8); position: absolute; top: -8px; right: -8px; }
.loginwrap .userbox .pop { min-width: 120px; }
.loginwrap .userbox .pop .coin { text-align: left; padding: 5px; }
.loginwrap .userbox .pop .coin a { background: none !important; display: inline-block !important; font-weight: bold; margin-left: 2px; }
.loginwrap .userbox .pop .home { padding-left: 30px; background: url(//www.nowscore.com/images/guess/user_icon.png) no-repeat 10px 2px; }
.loginwrap .userbox .pop .reCharge { padding-left: 30px; background: url(//www.nowscore.com/images/guess/user_icon.png) no-repeat 10px -27px; }
.loginwrap .userbox .pop .author { padding-left: 30px; background: url(//www.nowscore.com/images/guess/user_icon.png) no-repeat 10px -109px; }
.loginwrap .userbox .pop .myArtilce { padding-left: 30px; background: url(//www.nowscore.com/images/guess/user_icon.png) no-repeat 10px -55px; }
.loginwrap .userbox .pop .exit { padding-left: 30px; background: url(//www.nowscore.com/images/guess/user_icon.png) no-repeat 10px -82px; }

.topNav .pop { background: #fff; position: absolute; top: 50px; right: 0; min-width: 100px; padding: 5px 10px; text-align: center; border-radius: 0 0 8px 8px; box-shadow: 0 2px 15px rgba(0,0,0,0.2); z-index: 100; display: none; }
.topNav .pop a, .topNav .pop li { color: #333; font-size: 14px; line-height: 32px; padding: 0; border-bottom: 1px solid #f5f5f5; display: block; }
.topNav .pop a:last-child, .loginwrap .userbox .pop li:last-child { border: none; }
.topNav .pop a:hover, .loginwrap .userbox .pop li:hover { background-color: #f5f5f5; color: #51409d; border-radius: 4px; }
.topNav .pop span { color: #666 !important; font-size: 12px; line-height: normal; padding: 0; margin: 5px 8px; display: block; }
.topNav .pop img { width: 100px; margin-bottom: 5px; }
.topNav .hr-on { position: relative; }
.topNav .hr-on i { display: inline-block; }
.topNav .hr-on:hover .pop { display: block; }
.topAD { width: 1040px; text-align: center; margin: 6px auto; }
#toperAd { float: none; }
.topAD .adbox { height: 55px; overflow: hidden; }
.topAD a { display: block; }
.topAD a img { width: 100%; height: 55px; }

.secNav { background: #FFF; width: 100%; }
.subMenu { width: 1040px; margin: 0 auto; font-size: 14px; height: 36px; }
.subMenu a, .subMenu span { text-align: center; line-height: 36px; margin: 0 5px; padding: 8px 10px; }
.subMenu a:hover { color: #e9410f; text-decoration: none; }
.tag_on:link, .tag_on:visited { border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #e9410f; font-weight: bold; color: #e9410f; }

.popupWin.new { background: #fff; width: 500px; margin-left: -250px; position: fixed; top: 20%; left: 50%; padding: 10px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); z-index: 999; }
.new .closeBtn { background: url(../images/guess/popupClose.png) no-repeat center center; background-size: 50%; width: 30px; height: 35px; margin: 0; position: absolute; top: 14px; right: 10px; float: right; display: block; cursor: pointer; transition: all 0.2s linear; }
.new .closeBtn:hover { opacity: 0.7; }
.new .tabwin { background: #fff; height: 46px; margin: 0 30px; padding: 0; list-style-type: none; overflow: visible; display: block; }
.new .tabwin li { color: #666; font-size: 16px; line-height: 44px; text-align: center; width: 50%; border-bottom: 2px solid #D6D6D6; position: relative; overflow: visible; float: left; cursor: pointer; vertical-align: bottom; list-style-type: none; display: block; }
.new .tabwin li.on { color: #e9410f; border-bottom: 2px solid #e9410f; font-weight: bold; background-color: #fff !important }
.loginbg { z-index: 998 !important; height: 100%; width: 100%; left: 0px; top: 0px; background: #000; opacity: 0.3; z-index: 3; position: fixed; }

#returnTop { width: 40px; height: 120px }
#returnTop .top { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat 0 0; }
#returnTop .top:hover { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat -40px top; }
#returnTop .help { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat 0 -40px; }
#returnTop .help:hover { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat -40px -40px; }
#returnTop .app { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat 0 -80px; }
#returnTop .app:hover { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat -40px -80px; }
#returnTop .FB { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat 0 -120px; }
#returnTop .FB:hover { height: 40px; width: 40px; display: block; float: left; cursor: pointer; background: url(../images/guess/top_help_icon.jpg) no-repeat -40px -120px; }

.app { position: relative }
.app:hover .QRcode { display: block }
.QRcode { display: none; border: solid 1px #ccc; width: 230px; height: 230px; position: absolute; left: -255px; bottom: -15px; background-color: #fff }
.QRcode img { width: 100% }
.QRcode i { background: url(../images/r_icon.gif) no-repeat; width: 22px; height: 45px; position: absolute; right: -22px; bottom: 10px }